<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>总评成绩和男女性别关系柱状图</title>
    <style>
        #main {
            width: 100%;
            height: 95%;
            margin: auto;
            position: absolute;
            top: 5%;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
<button onclick='location.href="index.html"'>返回</button>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '总评成绩和男女性别关系柱状图',
            left: 'center', // 标题居中显示
            textStyle: {
                fontSize: 24 // 设置标题字体大小为 24px
            }
        },
        grid: {
            left: '3%',
            right: '20%',
            bottom: '2%',
            containLabel: true
        },
        legend: {
            data: ['女', '男'],
            top: '5%', // 图例顶部位置为标题底部位置加上表格高度的一半
            left: 'center' // 图例居中显示
        },
        xAxis: {
            name: '总评分数区间',
            data: ['60-70', '71-85', '86-100'],
            nameTextStyle: {
                fontSize: 15
            },
            axisLabel: {
                fontSize: 18 // x 轴字体大小
            }
        },
        yAxis: {
            name: '男女人数比例%',
            min: 0,
            max: 100,
            nameTextStyle: {
                fontSize: 15
            },
            axisLabel: {
                fontSize: 18 // x 轴字体大小
            }
        },
        series: [
            {
                name: '女',
                type: 'bar',
                data: [(73 / (73 + 5) * 100).toFixed(2), (102 / (102 + 35) * 100).toFixed(2), (33 / (33 + 23) * 100).toFixed(2)],
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签显示在柱的顶部
                    formatter: ' {c}%' // 标签内容为数值和百分比
                }
            },
            {
                name: '男',
                type: 'bar',
                data: [(5 / (73 + 5) * 100).toFixed(2), (35 / (102 + 35) * 100).toFixed(2), (23 / (33 + 23) * 100).toFixed(2)],
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签显示在柱的顶部
                    formatter: ' {c}%' // 标签内容为数值和百分比
                }
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
